<!DOCTYPE html>
<html>
    <head>
        <title>Node XML</title>
        <style>
            #mover {
                width:10px;
                height:10px;
                background:black;
            }
            #moved {
                width:5px;
                height:5px;
                background:red;
            }
            pre {
                position:absolute;
                top:120px;
                width:500px;
            }
        </style>
    </head>
    <body>
        <div id='mover'>
        <div id='moved'></div>
        </div>
        <pre id='report'></pre>
        <div style="display: none" id="xml" lat="12.34" lon="12.34" version="0" user="foo">
        </div>
    <script src="benchmark.js"></script>
    <script>
    var suite = new Benchmark.Suite;
    var obj = document.getElementById("xml");
    var fns = {
            lon: function(o, v) { o.loc[0] = parseFloat(v); },
            lat: function(o, v) { o.loc[1] = parseFloat(v); }
        },
        def = function(o, v, k) { o[k] = v; };

    // add tests
    suite
    .add('one', function() {
        var o = { type: 'node' },
            attrs = obj.attributes;
        for (var i = 0, l = attrs.length; i < l; i++) {
            var attr = attrs[i];
            o[attr.nodeName] = attr.nodeValue;
        }
        if (o.lon && o.lat) {
            o.loc = [parseFloat(o.lon), parseFloat(o.lat)];
            delete o.lon; delete o.lat;
        }
    })
    .add('two', function() {
        var o = { type: 'node', loc: [0, 0] },
            attrs = obj.attributes;
        for (var i = 0, l = attrs.length; i < l; i++) {
            var attr = attrs[i],
                k = attr.nodeName,
                v = attr.nodeValue;
            if (k === 'lon') {
                o.loc[0] = parseFloat(v);
            } else if (k === 'lat') {
                o.loc[1] = parseFloat(v);
            } else {
                o[k] = v;
            }
        }
    })
    .add('three', function() {
        var o = { type: 'node', loc: [0, 0] },
            attrs = obj.attributes;
        for (var i = 0, l = attrs.length; i < l; i++) {
            var attr = attrs[i];
            (fns[attr.nodeName] || def)(o, attr.nodeValue, attr.nodeName);
        }
    })
    .add('four', function() {
        var o = { type: 'node', loc: [0, 0] },
            attrs = obj.attributes;
        o.id = attrs.id.nodeValue;
        o.loc[0] = parseFloat(attrs.lon.nodeValue);
        o.loc[1] = parseFloat(attrs.lat.nodeValue);
        o.version = attrs.version.nodeValue;
        o.user = attrs.user.nodeValue;
    })
    // add listeners
    .on('cycle', function(event) {
        document.getElementById('report').innerHTML +=
          String(event.target) + '\n';
    })
    .on('complete', function() {
        document.getElementById('report').innerHTML +=
          'Fastest is ' + this.filter('fastest').pluck('name') + '\n';
    })
    // run async
    .run({ 'async': true });
</script>
</body>
